<template>
  <!-- 员工薪资档案 -->
  <div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-row style="padding-top: 25px; padding-left: 20px">
            <el-button class="file-box" text>
              <input
                type="file"
                class="file-btn"
                ref="file"
                @click="
                  (e) => {
                    e.target.value = '';
                  }
                "
                @change="importPoi"
              />导入
            </el-button>
            <el-button @click="exprotPayrollItems">导出</el-button>
            <div style="display: inline; position: relative; left: 671px">
              <el-input
                style="width: 200px"
                placeholder="请输入关键字"
                prefix-icon="el-icon-search"
                v-model="form.projectName"
                @keyup.enter.native="search"
              >
              </el-input>
            </div>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div
          class="grid-content bg-purple-dark-two"
          style="padding-top: 20px; padding-left: 20px"
        >
          <el-table :data="tableData" border="true" style="width: 79%">
            <el-table-column
              prop="name"
              label="姓名"
              width="190"
              align="center"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="deptName"
              label="部门"
              width="190"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="deptName"
              label="职位"
              width="190"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="deptName"
              label="手机号码"
              width="190"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="deptName"
              label="工号"
              width="190"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="deptName"
              label="证件号码"
              width="190"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="state"
              label="员工状态"
              width="150"
            >
              <template slot-scope="scope">
                {{ scope.row.state == 1 ? "启用" : "禁用" }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="入职日期">
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="转正日期">
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="基本工资">
            </el-table-column>
            <el-table-column
              align="center"
              fixed="right"
              label="操作"
              width="150"
            >
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="search(scope.row.id)"
                  type="text"
                >
                  调薪
                </el-button>
                <el-button
                  @click.native.prevent="search(scope.row.id)"
                  type="text"
                >
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="block" style="margin-top: 15px; margin-left: -400px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="form.currentPage"
              :page-sizes="[2, 5, 10, 20]"
              :page-size="form.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
    
    <script>
export default {
  data() {
    return {
      tableData: [],
      form: {
        currentPage: 1,
        pageSize: 5,
        paySlipsName: "",
      },
      total: 0,
    };
  },
  created() {
    this.getUserArchiveList();
  },
  methods: {
    // 获取薪资方案
    getSalaryList() {
      this.$http("paySlips/getSalaryList").then((res) => {
        if (res.data.code === 200) {
          this.salaryList = res.data.data;
        } else {
          this.$message.error(res.data.data);
        }
      });
    },
    search() {
      this.getUserArchiveList();
    },
    // 获取员工薪资档案列表
    getUserArchiveList() {
      this.$http.post("archive/getUserArchiveList", this.form).then((res) => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.rows;
          this.total = res.data.data.total;
        } else {
          this.$message.error(res.data.data);
        }
      });
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.form.currentPage = 1;
      this.form.pageSize = val;
      this.getPaySlipsList();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.form.currentPage = val;
      this.getPaySlipsList();
    },
    importPoi(){
        const inputFile = this.$refs.file.files[0];
        console.log(inputFile)
        var formDate =new FormData()
        formDate.set("file",inputFile)
        this.$http.post("payrollItems/importPoi",formDate,{headers:{
            "Content-Type": "multipart/form-data" 
        }}).then(res=>{
            if(res.data.code===200){
                this.$message(res.data.data)
                this.getPayrollItemsList()
            }else{
                this.$message.error(res.data.data)
            }
            
        })
    },
     // 导出
     exprotPayrollItems() {
      this.$http({
        url: "payrollItems/exprotPoi",
        method: "GET",
        responseType: "arraybuffer", // 接收二进制文件流
      }).then((res) => {
        const content = res.data;
        const blob = new Blob([content], { type: "application/octet-stream" });
        const fileName = "薪资项目.xlsx";

        if (typeof window.navigator.msSaveBlob !== "undefined") {
          window.navigator.msSaveBlob(blob, fileName);
        } else {
          const fileUrl = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = fileUrl;
          a.target = "_blank";
          a.download = fileName;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      });
    },
  },
};
</script>
    
    <style scoped>
.block {
  padding-left: 800px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: white;
  height: 90px;
}
.bg-purple-dark-two {
  background: white;
  height: 600px;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.u21705_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 3px;
  height: 20px;
  background: inherit;
  background-color: rgba(24, 144, 255, 1);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 14px;
}
.file-box {
    display: inline-block;
    position: relative;
    overflow: hidden;
    color: black;
    background-color: rgb(255, 255, 255);
}
 
.file-btn {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    outline: none;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}
</style>